<template>
	<div v-show="couponList.length>0" class="goods-select-coupon">
		<div class='container'>
			<div class='flex flex-item-center title-box'>
				<div class='line'></div>
				<span>可使用</span>
			</div>
			<div class='coupon-box'>
				<div class='coupon-item'>
					<discount-couponc v-for='(item, index) in couponList' :key='index' :item='item' :topClass="topClass" :bottomClass="bottomClass" class='discount' v-on:choiceCouponParent="choiceCoupon(item)"></discount-couponc>
				</div>
			</div>
			<div v-show="unCouponList.length>0" class='flex flex-item-center title-box'>
				<div class='line'></div>
				<span>不可使用</span>
			</div>
			<div class='coupon-box'>
				<div class='coupon-item'>
					<discount-couponc v-for='(item, index) in unCouponList' :key='index' :item='item' :topClass="topClass" :bottomClass="bottomClass" class='discount'></discount-couponc>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	import DiscountCouponc from '@/components/huabanShop/discountCouponC'
	export default {
		components: {
			DiscountCouponc
		}
		,data() {
			return {
				activeId: "undefined",
				couponList: [],
				unCouponList: [],
				topClass: 'topNoUsed',
				bottomClass: 'bottomNoUsed'
			}
		}
		,created() {
			this.$vux.loading.show({
				text: '加载中'
			});
			http.post(Api.couponGetEnableCouponList, {
				counts: this.goodsIndex.selecNum,
				goodsId: this.goodsIndex.goodsId,
				activeId: this.activeId == "undefined" ? null : this.activeId,
				goodsNormId: this.goodsIndex.normId,
				goodsNormName: this.goodsIndex.normName
			}).then(res => {
				this.$vux.loading.hide()
				if(res.code == 200) {
					res.data.forEach((item) => {
						if(item.couponState) {
							this.couponList.push(item);
						} else {
							this.unCouponList.push(item);
						}
					})
				} else {
					this.toast(res.message)
				}
			})
		}
		,methods:{
			choiceCoupon(item){
				let subInfo = Object.assign(this.goodsIndex,{'couponId':item.id,'couponAmount':item.couponAmount})
				sessionStorage.setItem('subInfo',JSON.stringify(subInfo));
				
				this.$router.push('/submit-goods');
			}
		}
		,computed: {
			goodsIndex() {
				return JSON.parse(sessionStorage.getItem('subInfo')) 
			}
		}
	}
</script>

<style lang='less'>
	.goods-select-coupon {
		width: 7.5rem;
		height: 100%;
		background-color: #f2f2f2;
		.container {
			padding: 0 .3rem;
			.title-box {
				height: .97rem;
				position: relative;
				line-height: .97rem;
			}
			.title-box span {
				position: absolute;
				padding: 0 .18rem;
				font-size: .26rem;
				font-family: PingFangSC-Regular;
				color: rgba(70, 70, 70, 1);
				background-color: #f2f2f2;
				text-align: center;
			}
			
			.line {
				width: 6.9rem;
			    height: 50%;
			    position: absolute;
			    top: 0;
			    border-bottom: 1px solid #999;
			}
			
			.coupon-item {
				margin-bottom: .3rem;
			}
			
			.coupon-box .coupon-item:last-child {
				margin-bottom: 0;
			}
			
			.no-coupon {
				font-size: .3rem;
				font-family: PingFangSC-Regular;
				text-align: center;
				height: 1rem;
				line-height: 1rem;
			}
		}
	}
	
	
</style>